<template>
    <view class="overall">
        <view class="title">
            <view class="name">济源仁新医院</view>
        </view>
        <image class="back" :src="BASE_API_URL + '/add.png'" mode=""></image>
        <view class="infos">
            <view class="hospital">
                <view>
                    <image :src="BASE_API_URL + '/' + innerText.avatar" mode=""></image>
                    <view>
                        <view style="font-weight: bold;font-size: 32rpx;">{{innerText.name}}</view>
                        <view
                            style="border: 1rpx #44BFB6 solid; text-align: center; color: #44BFB6; margin-top: 20rpx; width: 150rpx;">
                            三级甲等</view>
                    </view>
                </view>
                <view class="contact">
                    <view @click="makePhoneCall">
                        <image src='/static/phone.png' mode=""></image>
                        <view>0768-88888888</view>
                    </view>
                    <view @click="maps()">
                        <image style="width: 30px;" src='/static/address.png' mode=""></image>
                        <view>{{innerText.address}}</view>
                    </view>
                </view>
            </view>

            <view class="manifest">
                <view class="caption">
                    <view></view>
                    <view>功能清单</view>
                </view>

                <view class="items">
                    <view @click="divide(1)">
                        <view>
                            <image src="/static/introduce.png" mode=""></image>
                        </view>
                        <view>科室介绍</view>
                    </view>
                    <view @click="divide(2)">
                        <view>
                            <image src="/static/doctor.png" mode=""></image>
                        </view>
                        <view>医生介绍</view>
                    </view>
                    <view @click="divide(3)">
                        <view>
                            <image src="/static/hospital.png" mode=""></image>
                        </view>
                        <view>医院动态</view>
                    </view>
                    <view @click="divide(4)">
                        <view>
                            <image src="/static/depart.png" mode=""></image>
                        </view>
                        <view>科室分布</view>
                    </view>
                </view>
            </view>

            <view class="content">
                <view class="caption">
                    <view></view>
                    <view>本院介绍</view>
                </view>
                <view style="margin-top: 30rpx;">
                    {{innerText.content}}
                </view>
            </view>
            <!-- 底部导航栏 -->
            <view class="bottom" style="margin-left: -3%;">
                <view class="bottom-item" @click="goto">
                    <image alt="首页" src="/static/home.png"/>
                    <text>首页</text>
                </view>
                <view class="bottom-item" @click="hospital">
                    <image alt="医院信息" src="/static/messageAfter.png"/>
                    <text style="color: #00DACA;">医院信息</text>
                </view>
                <view class="bottom-item" @click="family">
                    <image alt="专家榜" src="/static/icon3.png" />
                    <text>专家榜</text>
                </view>
                <view class="bottom-item" @click="can">
                    <image alt="消息" src="/static/icon4.png"/>
                    <text>消息</text>
                </view>
                <view class="bottom-item" @click="my">
                    <image src="/static/mine.png" alt="我的" />
                    <text>我的</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { BASE_API_URL } from '@/utils/config'; // 导入配置
import {
    ref, onBeforeMount
} from 'vue';
import {
    hospital,
    card,
} from '@/api/index.js';
const innerText = ref([]);

function fun() {
    hospital({}).then(res => {
        console.log(res.data[0]);
        innerText.value = res.data[0];
    });
}
fun();

const cardInfo = ref([]);
const userInfo = ref([]);

function funs() {
    uni.getStorage({
        key: 'user',
        success: function (res) {
            console.log(res.data); // 输出存储的数据对象
            userInfo.value = res.data;
            card({
                user_id: res.data.id,
            }).then(res => {
                console.log(res.data);
                if (res.data != null) {
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].status == 1) {
                            cardInfo.value = res.data[i];
                            console.log(cardInfo.value);
                        }
                    }
                }
            })
        }
    });
}

funs();

function divide(index) {
    if (index == 1) {
        uni.setStorage({
            key: 'share',
            data: 2,
            success: function () {
                console.log('数据存储成功');
            }
        });
        uni.navigateTo({
            url: '/pages/department/department',
        })
    }
    if (index == 2) {
        uni.setStorage({
            key: 'share',
            data: 3,
            success: function () {
                console.log('数据存储成功');
            }
        });
        uni.navigateTo({
            url: '/pages/department/department',
        })
    }
    if (index == 3) {
        uni.navigateTo({
            url: '/pages/dynamic/dynamic',
        })
    }
    if (index == 4) {
        uni.navigateTo({
            url: '/pages/distribution/distribution',
        })
    }
}

function maps() {
    uni.navigateTo({
        url: '/pages/map/map',
    })
}

const makePhoneCall = () => {
    uni.makePhoneCall({
        phoneNumber: '10086', // 替换为你想要拨打的电话号码
        success: (res) => {
            console.log('拨打电话成功', res);
        },
        fail: (err) => {
            console.log('拨打电话失败', err);
            uni.showToast({
                title: '拨号失败，请检查您的设备',
                icon: 'none'
            });
        }
    });
};

const goto = () => {
    // 首页
    uni.redirectTo({
        url: '/pages/home/home'  // 请根据实际路径修改
    });
};

const family = () => {
    // 专家榜
	uni.redirectTo({
	    url: '/pages/expert/expert'  // 请根据实际路径修改
	});
};

const can = () => {
    // 消息
};

const my = () => {
    // 我的
	uni.redirectTo({
	    url: '/pages/personal/personal'  // 请根据实际路径修改
	});
};
</script>

<style scoped>
.overall {
    width: 100%;
    background-color: #EEEEEE;
    padding-bottom: 200rpx;
}

.title {
    width: 100%;
    height: 180rpx;
    background-color: #00DACA;
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    font-size: 42rpx;
    font-weight: bold;
    position: fixed;
    top: 0;
    z-index: 10;
}

.name {
    padding-top: 60rpx;
}

.back {
    width: 100%;
    height: 600rpx;
    object-fit: cover;
    position: absolute;
    top: 160rpx;
    z-index: 0;
}

.infos {
    width: 94%;
    margin: 178rpx 3%;
    background-color: white;
    border-radius: 20rpx;
    position: relative;
    z-index: 5;
    /* height: 100vh; */
    overflow: hidden;
}

.hospital {
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
    height: 300rpx;
    border-bottom: 2rpx #EEEEEE solid;
	margin-top: 10px;
}

.hospital image {
    width: 110rpx;
    height: 110rpx;
    margin-right: 30rpx;
}

.hospital>view:first-child {
    display: flex;
    padding-top: 30rpx;
}

.contact {
    margin-top: 30rpx;
}

.contact image {
    width: 35rpx;
    height: 40rpx;
}

.contact>view {
    height: 60rpx;
    display: flex;
    align-items: center;
}

.manifest {
    padding-top: 30rpx;
    width: 94%;
    margin: 0rpx 3%;
}

.caption {
    display: flex;
    font-size: 28rpx;
    font-weight: bold;
    align-items: center;
}

.caption>view:first-child {
    width: 20rpx;
    height: 20rpx;
    background-color: #44BFB6;
    border-radius: 20000rpx;
    margin-right: 30rpx;
}

.manifest>view:last-child {
    width: 100%;
    height: 200rpx;
}

.manifest image {
    width: 50rpx;
    height: 50rpx;
    margin-right: 0rpx;
}

.items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    font-size: 24rpx;
}

.items>view {
    width: 20%;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #505050;
}

.items>view>view:first-child {
    width: 110rpx;
    height: 110rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1rpx 1rpx 10rpx 10rpx #F7F7F7;
    border-radius: 10000rpx;
    margin-bottom: 20rpx;
}

.content {
    margin-top: 30rpx;
    width: 95%;
    margin-left: 3%;
    margin-right: 2%;
    padding-bottom: 100rpx;
}

/* 底部导航栏 */
.bottom {
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #e6e6e6;
}

.bottom-item {
    text-align: center;
    font-size: 12px;
    color: #7d7d7d;
}

.bottom-item image {
    width: 30px;
    height: 30px;
    vertical-align: middle; /* 图片垂直居中 */
}

.bottom-item text {
    display: block;
    margin-top: 5px; /* 给文字留些空间 */
}
</style>    